<template>
  <div>
    <el-form ref="globalForm" :model="globalForm" label-width="100">
      <el-form-item label="状态：">
        <el-switch v-model="globalForm.status"/>
      </el-form-item>
      <div class="statu-info">用户拉新活动，是一款可以帮助代理商推广用户注册从而获得用户分成的营销活动</div>
      <div class="awardSet-title">代理商奖励设置</div>
      <el-form-item label="用户注册成功奖励：" label-width="180px">
        <el-switch v-model="globalForm.registerAward"/>
        <div v-if="globalForm.registerAward === true" class="awardSet-radio">
          <el-radio-group v-model="globalForm.awardCondition">
            <el-radio :label="1">
              用户注册成功即奖励代理商
              <el-input v-model="globalForm.awardValueOne" size="small" style="width:100px"/>元
            </el-radio>
            <el-radio :label="2">
              用户注册成功，且首次消费即奖励代理商
              <el-input v-model="globalForm.awardValueTwo" size="small" style="width:100px"/>元
            </el-radio>
          </el-radio-group>
        </div>
      </el-form-item>
      <el-form-item label="用户消费后奖励分成" label-width="180px">
        <el-switch v-model="globalForm.consumeDivide"/>
        <div v-if="globalForm.consumeDivide === true" class="divide-checked">
          <el-checkbox v-model="globalForm.buyCourse">购买课程</el-checkbox>
          <div v-if="globalForm.buyCourse">
            <div>
              <span style="margin:0 20px;">分成比：</span>
              <span>
                被邀请用户产生的每笔消费，代理商可获订单价格的
                <el-input v-model="globalForm.courseRate" size="small" style="width:100px"/>%分成。
              </span>
            </div>
            <div>
              <span style="margin:0 20px;">有效期：</span>
              <span>
                <el-radio-group v-model="globalForm.courseExpiryDate">
                  <el-radio :label="1">长期有效</el-radio>
                  <el-radio :label="2">自定义有效期</el-radio>
                </el-radio-group>
              </span>
              <div v-if="globalForm.courseExpiryDate === 2" style="margin-left:100px;">
                <el-date-picker
                  v-model="globalForm.courseCycle"
                  type="datetimerange"
                  align="left"
                  unlink-panels
                  range-separator="|"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width:300px"
                />
              </div>
            </div>
          </div>
          <el-checkbox v-model="globalForm.buyClass">购买班级</el-checkbox>
          <div v-if="globalForm.buyClass">
            <div>
              <span style="margin:0 20px;">分成比：</span>
              <span>
                被邀请用户产生的每笔消费，代理商可获订单价格的
                <el-input v-model="globalForm.classRate" size="small" style="width:100px"/>%分成。
              </span>
            </div>
            <div>
              <span style="margin:0 20px;">有效期：</span>
              <span>
                <el-radio-group v-model="globalForm.classExpiryDate">
                  <el-radio :label="1">长期有效</el-radio>
                  <el-radio :label="2">自定义有效期</el-radio>
                </el-radio-group>
              </span>
              <div v-if="globalForm.classExpiryDate === 2" style="margin-left:100px;">
                <el-date-picker
                  v-model="globalForm.classCycle"
                  type="datetimerange"
                  align="left"
                  unlink-panels
                  range-separator="|"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width:300px"
                />
              </div>
            </div>
          </div>
          <el-checkbox v-model="globalForm.buyMember">购买会员</el-checkbox>
          <div v-if="globalForm.buyMember">
            <div>
              <span style="margin:0 20px;">分成比：</span>
              <span>
                被邀请用户产生的每笔消费，代理商可获订单价格的
                <el-input v-model="globalForm.memberRate" size="small" style="width:100px"/>%分成。
              </span>
            </div>
            <div>
              <span style="margin:0 20px;">有效期：</span>
              <span>
                <el-radio-group v-model="globalForm.memberExpiryDate">
                  <el-radio :label="1">长期有效</el-radio>
                  <el-radio :label="2">自定义有效期</el-radio>
                </el-radio-group>
              </span>
              <div v-if="globalForm.memberExpiryDate === 2" style="margin-left:100px;">
                <el-date-picker
                  v-model="globalForm.memberCycle"
                  type="datetimerange"
                  align="left"
                  unlink-panels
                  range-separator="|"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width:300px"
                />
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <div class="awardSet-title">被邀请用户奖励设置</div>
      <el-form-item label="状态：" label-width="180px">
        <el-switch v-model="globalForm.inviteeStatus"/>
      </el-form-item>
      <el-form-item v-if="globalForm.inviteeStatus === true" label="注册成功奖励：" label-width="180px">
        <div>
          用户注册成功即送
          <el-input v-model="globalForm.inviteeMoney" size="small" style="width:100px"/>元低价优惠券(可用于全站消费)
        </div>
        <div style="margin-top:10px">
          优惠券使用有效期
          <el-input v-model="globalForm.inviteeDay" size="small" style="width:100px"/>天
        </div>
      </el-form-item>
      <el-form-item label-width="180px">
        <el-button type="primary" @click="saveForm">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getTenantId, getUserName } from '@/utils/auth'
import { getGlobalSetting, saveOrUpdateGlobalForm } from '@/api/distribution/agencysetting'
export default {
  data() {
    return {
      globalForm: {
        status: true,
        registerAward: true,
        awardCondition: 1,
        awardValueOne: '10',
        awardValueTwo: '10',
        consumeDivide: true,
        buyCourse: true,
        buyClass: true,
        buyMember: false,
        courseRate: '10',
        courseExpiryDate: 1,
        courseCycle: [],
        classRate: '10',
        classExpiryDate: 1,
        classCycle: [],
        memberRate: '10',
        memberExpiryDate: 1,
        memberCycle: [],
        inviteeStatus: true,
        inviteeMoney: '50',
        inviteeDay: '30'
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getGlobalSetting(getTenantId()).then(res => {
        if (res.data.item) {
          this.globalForm = res.data.item
          this.globalForm.courseCycle = [this.globalForm.courseStartTime, this.globalForm.courseEndTime]
          this.globalForm.classCycle = [this.globalForm.classStartTime, this.globalForm.classStartTime]
          this.globalForm.memberCycle = [this.globalForm.memberStartTime, this.globalForm.memberEndTime]
        }
      })
    },
    saveForm() {
      this.$refs.globalForm.validate((valid) => {
        if (valid) {
          if (!this.globalForm.id) {
            this.globalForm.tenantId = getTenantId()
            this.globalForm.creator = getUserName()
          }
          if (this.globalForm.courseExpiryDate === true) {
            this.globalForm.courseStartTime = this.globalForm.courseCycle[0]
            this.globalForm.courseEndTime = this.globalForm.courseCycle[1]
          }
          if (this.globalForm.classExpiryDate === true) {
            this.globalForm.classStartTime = this.globalForm.classCycle[0]
            this.globalForm.classEndTime = this.globalForm.classCycle[1]
          }
          if (this.globalForm.memberExpiryDate === true) {
            this.globalForm.memberStartTime = this.globalForm.memberCycle[0]
            this.globalForm.memberEndTime = this.globalForm.memberCycle[1]
          }
          saveOrUpdateGlobalForm(this.globalForm).then(res => {
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
            this.getData()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
div {
  color:#606266;
}
.el-form-item {
  margin-bottom: 22px;
}
.statu-info {
  background-color: #eaeaea;
  color: #8e8e8e;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
}
.awardSet-title {
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0;
  color: #636363;
}
.awardSet-radio {
  margin-top: 10px;
  .el-radio {
    margin: 10px 0;
    display: block;
  }
}
.divide-checked {
  margin-top: 10px;
  .el-checkbox {
    margin: 10px 0;
    display: block;
  }
}
</style>

